<template>
  <!-- 找回密码（手机验证）-->
  <div>
    <div class="i-top">
      <div class="wrap">
        <div class="logo">
          <a href="https://www.liepin.com/" title="猎聘网"></a>
        </div>
      </div>
    </div>
    <div class="main">
      <h1>找回密码</h1>
      <div class="passport-progress">
        <el-steps :active="active" finish-status="success" simple>
          <el-step title="验证身份" icon="el-icon-edit"></el-step>
          <el-step title="设置新密码" icon="el-icon-upload"></el-step>
          <el-step title="完成" icon="el-icon-picture"></el-step>
        </el-steps>
      </div>
    </div>
    <div class="content">
      <div class="left">
        <div class="current">
          <div class="text_div">
            <a href="" class="text"> 用手机找回 </a>
          </div>
        </div>
      </div>
      <div class="right">
        <el-form ref="forms" :model="forms" :rules="rules">
          <div class="phone">
            <div class="phone-text">手机号码：</div>
            <div class="user-phone">{{ get_phone }}</div>
          </div>
          <div class="dx_number">
            <th>短信验证码：</th>
            <el-form-item class="dx_input" prop="phone_code">
              <el-input v-model="forms.phone_code" placeholder=""></el-input>
            </el-form-item>
            <div class="nu_btn">
              <button type="button" class="btn" @click="sendCode">
                {{ forms.sendCodeMes }}
              </button>
            </div>
          </div>
          <div class="next">
            <el-button type="primary" @click="onSubmit('forms')"
              >下一步</el-button
            >
          </div>
        </el-form>
        <div class="note">
          <p>找回密码遇到困难，请与我们联系！客服电话：400-6212-266</p>
        </div>
      </div>
      <div class="footer">
        <div class="copyright">
          <div class="copy-side">
            <i class="icon-16 icon-bottom-phone"></i>服务热线：400-6212-266
          </div>
          <div class="copy-main">
            <p>
              <a
                href="http://www.liepin.com/about/introduction.shtml"
                target="blank"
                >猎聘简介 |</a
              >
              <a href="http://www.liepin.com/inshr/index.shtml" target="blank"
                >加入猎聘 |</a
              >
              <a
                href="http://www.liepin.com/about/innovation.shtml"
                target="blank"
                >创新优势 |</a
              >
              <a
                href="http://www.liepin.com/user/agreement.shtml"
                target="blank"
                >用户协议 |</a
              >
              <a
                href="https://lpt.liepin.com/pdfview/displayagreement?type=014"
                target="blank"
                >隐私条款 |</a
              >
              <a
                href="http://www.liepin.com/about/mediareports.shtml"
                target="blank"
                >媒体报道 |</a
              >
              <a
                href="http://www.liepin.com/about/about_us.shtml"
                target="blank"
                >联系我们 |</a
              >
              <a href="http://www.liepin.com/sitemap.shtml" target="blank"
                >网站地图 |</a
              >
              <a href="http://www.liepin.com/cooperation.shtml" target="blank"
                >网站合作 |</a
              >
              <a
                data-selector="suggest"
                href="http://www.liepin.com/user/feedback/"
                target="blank"
                >意见反馈 |</a
              >
              <a href="http://www.liepin.com/" target="blank">猎聘</a>
            </p>
          </div>
          <div class="copy-footer">
            <p>
              <a
                class="police-record"
                href="http://www.beian.miit.gov.cn"
                target="_blank"
                style="color: rgb(153, 153, 153)"
                >京ICP备09083200号</a
              >
              合字B2-20160007
              <a
                class="police-record"
                href="https://www.liepin.com/about/business-license.shtml"
                target="_blank"
                style="color: rgb(153, 153, 153)"
                >营业执照</a
              >
              <a
                class="police-record"
                href="https://www.liepin.com/about/hrs-license.shtml"
                target="_blank"
                style="color: rgb(153, 153, 153)"
                >人才服务许可证:120116174002号</a
              >
              <a
                class="police-record"
                target="_blank"
                href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502035189"
                style="color: rgb(153, 153, 153)"
              >
                <img :src="images[0]" />
                <span>京公网安备 11010502035189号</span>
              </a>
            </p>
            <p class="reserved">
              Copyright © 2006-2020 liepin.com All Rights Reserved
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      send_time: 30,
      p_code: "",
      forms: {
        yzm: "",
        phone_code: "",
        sendCodeMes: "发送验证码",
      },
      images: [
        require("../../assets/img/police.png"),
        require("../../assets/img/pic_yzm.png"),
      ],
      active: 0,
      rules: {
        phone_code: [
          {
            required: true,
            message: "验证码不能为空",
            trigger: "blur",
          },
        ],
      },
    };
  },
  computed: {
    //获取账号
    get_phone() {
      return this.$route.query.phone_num;
    },
  },
  methods: {
    sendCode() {
      this.$axios({
        method: "POST",
        url: "api/send_phone",
        data: {
          phone_num: this.get_phone,
        },
      })
        .then((data) => {
          var interval = setInterval(() => {
            this.send_time--;
            if (this.send_time == 0) {
              this.forms.sendCodeMes = "获取验证码";
              this.send_time = 30;
              clearInterval(interval);
            } else {
              this.forms.sendCodeMes = this.send_time + "s后重新获取";
            }
          }, 1000);
          alert(data.data.code)
          this.$message({
            showClose: true,
            message: "发送短信成功",
            type: "success",
          });
          console.log(data.data);
          this.p_code = data.data.code;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    onSubmit(formsName) {
      this.$refs[formsName].validate((valid) => {
        if (valid) {
          // alert(this.p_code,this.forms.phone_code)
          if (this.p_code == this.forms.phone_code)
            this.$router.push({
              name: "NewPassword",
              params: {
                p_code: this.p_code,
                p_num: this.$route.query.phone_num,
              },
            });
          else{
            this.$message({
            showClose: true,
            message: "验证码不正确，稍后重试！",
            type: "error",
          });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style scoped>
h1 {
  font-size: 28px;
  line-height: 50px;
  font-weight: normal;
  margin-top: 2%;
  margin-left: -44.5%;
  font-family: inherit;
  color: inherit;
  text-rendering: optimizelegibility;
}
.content {
  width: 100%;
  height: 40%;
  margin-left: 0%;
}
.left {
  width: 12%;
  margin-left: 24%;
}
.current {
  height: 370px;
  border: 1px;
  border-style: solid;
  border-color: #999;
  background-color: #f9f9f9;
}
.text_div {
  width: 100.5%;
  height: 10%;
  margin-top: -1%;
  background-color: #024e7a;
  text-align: center;
}
.pic-yzm {
  width: 200px;
}
</style>
